<template>
  <Drawer
    width="70%"
    title="排班"
    placement="right"
    v-model:visible="visible"
    :footer-style="{ textAlign: 'right' }"
    @close="onclose"
  >
    <template #closeIcon>
      <ArrowLeftOutlined />
    </template>
    <Card>
      <Form ref="formRef" v-model="formState">
        <FormItem label="用户组名" name="name">
          {{ name }}
        </FormItem>
        <FormItem label="排班方式" name="isQuickSchedule">
          <RadioGroup v-model:value="formState.isQuickSchedule">
            <Radio :value="true">快速排班</Radio>
            <Radio :value="false">精细排班</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem v-if="formState.isQuickSchedule == true" label="值班方案" name="dutyDuration">
          <Select
            v-model:value="formState.quickSchedule.dutyDuration"
            :options="dutyDurationOpt"
            placeholder="请选择"
            style="width: 200px"
          ></Select>
        </FormItem>
        <FormItem v-if="formState.isQuickSchedule == false" label="循环周期" name="scheduleCycle">
          <InputNumber id="inputNumber" v-model:value="formState.customizedSchedule.scheduleCycle" :min="2" :max="7" />
        </FormItem>
        <FormItem v-if="formState.isQuickSchedule == true" label="人员选择" name="dutyWorksheetUserList">
          <FormItem>
            <TypographyText disabled>值班人支持每轮选择一人值班，根据轮班次序轮番加班</TypographyText>
          </FormItem>
          <FormItem>
            <Row type="flex" justify="space-around" align="middle" :gutter="8">
              <Col :span="8">
                <Table
                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                  :columns="memberColumns"
                  :data-source="memberData"
                  :pagination="false"
                />
              </Col>
              <Col :span="2.5">
                <Row>
                  <Button
                    type="primary"
                    style="width: 120px; text-align: left"
                    @click="chooseSingle"
                    :disabled="btnDisable"
                    >单人轮班<template #icon>
                      <RightOutlined style="float: right; margin-left: 210px; margin-top: 4px" /> </template
                  ></Button>
                </Row>
                <Row>
                  <Button
                    style="margin-top: 8px; width: 120px; text-align: left"
                    type="primary"
                    @click="chooseMutiple"
                    :disabled="btnDisable"
                    >共同值班<template #icon>
                      <RightOutlined style="float: right; margin-left: 210px; margin-top: 4px" /> </template
                  ></Button>
                </Row>
              </Col>
              <Col :span="8">
                <Table :columns="dutyColumns" :data-source="dutyData" :pagination="false">
                  <template #bodyCell="{ column, record }">
                    <template v-if="column.dataIndex === 'action'">
                      <a @click="onDelete(record)"><CloseCircleOutlined /></a>
                    </template>
                  </template>
                </Table>
              </Col>
            </Row>
            <br />

            <div class="btn-wrapper">
              <Button v-if="dutyData.length" class="editable-add-btn" type="primary" @click="view"
                ><template #icon><ReloadOutlined /> </template>预览</Button
              >
              <Popconfirm
                v-if="dutyData.length"
                title="是否确认删除？"
                @confirm="deleteAll"
                ok-text="确定"
                cancel-text="取消"
              >
                <Button class="editable-add-btn" type="dashed" style="margin-left: 8px"
                  ><template #icon><CloseOutlined /> </template>一键删除</Button
                >
              </Popconfirm>
            </div>
          </FormItem>
        </FormItem>
      </Form>
    </Card>
    <ScheduleCustom v-if="formState.isQuickSchedule == false" />
    <ScheduleCalendar ref="calendar" v-if="formState.isQuickSchedule == true" />
    <template #footer>
      <Button style="margin-right: 8px" type="primary" @click="submit">提交</Button>
      <Button @click="onclose">取消</Button>
    </template>
  </Drawer>
</template>
<script lang="ts" setup>
import {
  Card,
  Drawer,
  Form,
  FormItem,
  Button,
  TypographyText,
  Select,
  RadioGroup,
  Radio,
  Table,
  Col,
  Row,
  InputNumber,
  Popconfirm,
} from 'ant-design-vue';
import { ref } from 'vue';
import {
  ArrowLeftOutlined,
  CloseOutlined,
  CloseCircleOutlined,
  RightOutlined,
  ReloadOutlined,
} from '@ant-design/icons-vue';
import { dutyColumns, memberColumns } from '/@/views/work-order/userManagement/userGroup/data';
import ScheduleCalendar from '/@/views/work-order/userManagement/userGroup/component/ScheduleCalendar.vue';
import ScheduleCustom from '/@/views/work-order/userManagement/userGroup/component/ScheduleCustom.vue';
import { QuickDutyItemList } from '/@/api/work-order/userManagement/userGroup/model/userGroupModel';
const visible = ref(false);
const name = ref();
let formState = ref({
  customizedSchedule: {
    cycleItemList: [
      {
        dutyItemList: [
          {
            cycleNumber: undefined,
            dutyName: undefined,
            dutyWorksheetUserList: [
              {
                id: undefined,
                name: undefined,
              },
            ],
            endTime: {
              hour: undefined,
              minute: undefined,
              nano: undefined,
              second: undefined,
            },
            startTime: {
              hour: undefined,
              minute: undefined,
              nano: undefined,
              second: undefined,
            },
          },
        ],
      },
    ],
    scheduleCycle: undefined,
    templateCycleItem: undefined,
    useTemplate: undefined,
  },
  groupId: undefined,
  isQuickSchedule: undefined,
  quickSchedule: {
    dutyDuration: undefined,
    quickDutyItemList: [] as QuickDutyItemList[],
  },
  timestamp: undefined,
});
const formRef = ref();
type Key = string | number;
interface DataType {
  key: Key;
  id?: number;
  name: string;
}
const memberData = ref<DataType[]>([]);
const dutyData = ref<DataType[]>([]);

const selectedRowKeys = ref<Key[]>([]);
const btnDisable = ref(true);
const onSelectChange = (selectedKeys: Key[]) => {
  selectedRowKeys.value = selectedKeys;
  if (selectedRowKeys.value.length !== 0) {
    btnDisable.value = false;
  }
};

const chooseSingle = () => {
  memberData.value.forEach((item) => {
    if (selectedRowKeys.value.indexOf(item.key) !== -1) {
      dutyData.value.push(item);
      formState.value.quickSchedule.quickDutyItemList.push({ dutyWorksheetUserList: [item] });
    }
  });
  selectedRowKeys.value = [];
};

const chooseMutiple = () => {
  let selectedRows = [];
  memberData.value.forEach((item) => {
    if (selectedRowKeys.value.indexOf(item.key) !== -1) {
      selectedRows.push(item);
    }
  });
  let dutyStr = '';
  let dutyKey = '';
  selectedRows.forEach((item) => {
    dutyStr += item.name + ' ';
    dutyKey += item.key + ' ';
  });
  dutyData.value.push({ key: dutyKey, name: dutyStr });
  formState.value.quickSchedule.quickDutyItemList.push({ dutyWorksheetUserList: selectedRows });
  selectedRowKeys.value = [];
};

const onDelete = (record) => {
  formState.value.quickSchedule.quickDutyItemList.splice(dutyData.value.indexOf(record), 1);
  dutyData.value.splice(dutyData.value.indexOf(record), 1);
};

const deleteAll = () => {
  dutyData.value = [];
  formState.value.quickSchedule.quickDutyItemList = [] as QuickDutyItemList[];
};

const calendar = ref();
const view = () => {
  calendar.value.openCalendar(formState.value);
};

const dutyDurationOpt = ref();
const openSchedule = async (record) => {
  name.value = record.name;
  formState.value.groupId = record.id;
  visible.value = true;

  // memberData.value = await getDetailUserList({groupId:record.id,name:record.name});
  memberData.value = [];
  for (let i = 0; i < 5; i++) {
    memberData.value.push({
      key: i,
      id: i,
      name: `Edward King ${i}`,
    });
  }

  // dutyDurationOpt.value=await getDutyDuration();
  dutyDurationOpt.value = [
    { label: '4小时', value: 4 },
    { label: '8小时', value: 8 },
  ];
};

const onclose = () => {
  visible.value = false;
};

defineExpose({ openSchedule });
</script>
<style lang="less" scoped>
.btn-wrapper {
  float: right;
  margin-right: 40px;
}
.ant-table {
  min-height: 352px !important;
}
.ant-empty-normal {
  margin: 140px 0 !important;
}
</style>
